<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>


<div id="app">

<!--  使用v-bind来进行 父组件到子组件的数据传递-->
<cpn v-bind:cmovies="movies" :cmessage="message"></cpn>

<!--  使用组件内的默认值展示组件-->
  <cpn :cmessage="message"></cpn>

</div>

<!--组件模板-->
<template id="cpn">
 <div>
  <ul>
    <li v-for="item in cmovies">{{item}}</li>
  </ul>
   <h2>{{cmessage}}</h2>o
 </div>
</template>




  <script src="../js/vue.js"></script>
<script>

  //1 编写组件
  const  cpn = {
    template:`#cpn`,
    //方式一 使用props数组类型  数组里写变量的名字
    // props:['cmovies','message'],

    //方式二  变量名:限制类型
    // props:{
    //   cmovies:Array,
    //   cmessage:String, //前面是变量的命 后面是类型的限制
    //
    // },

    //方式三 提供一些默认值  变量名:{ type:类型, default:默认值  }
    props:{
      cmessage:{
        type: String,
        default: 'aaaaaaaaaa',
        //required 表示此属性 在组件使用时 是否必须给此属性传值  true表示必须要传
        required: true
      },
      //类型是对象或者是数组时 默认值必须是个函数
      cmovies:{
        type:Array,
        default(){
          return ['信条','后翼弃兵']
        }
      }

    },

    data(){
      return{ }
    }
  }



  const app = new Vue({
    el:'#app',
    data:{
      message:"message",
      //在父组件 定义数组 在子组件中展示
      movies:['信条','海贼王','海尔兄弟']

    },
    methods:{


    },
    //注册为子组件
    components:{
      'cpn':cpn
    }

  })
</script>

</body>
</html>